<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8" />
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <title></title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background: #ffffff;
            }

            * {
                margin: 0;
                padding: 0;
            }

            button,
            input,
            input[type=button],
            input[type=reset],
            input[type=search],
            input[type=submit],
            select {
                outline: none;
                -webkit-tap-highlight-color: transparent;
                -webkit-appearance: none;
                font-family: inherit;
                border: none;
            }

            .hide {
                display: none;
            }

            .search-wrap {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                padding: 8px 60px 8px 15px;
                background-color: #fff;
                border-bottom: 1px solid #d3d3d3;
                z-index: 100;
            }

            .search-wrap.init-status {
                padding-right: 15px;
            }

            .search-wrap .search-bar {
                display: block;
                height: 30px;
                background-color: #ebebeb;
                padding-left: 10px;
                padding-right: 10px;
                color: #b4b4b4;
                font-size: 15px;
                line-height: 31px;
                border-radius: 5px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .search-wrap .cancel,
            .search-wrap .submit {
                position: absolute;
                top: 0;
                right: 0;
                width: 55px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                font-size: 16px;
                color: #0079ff;
                background-color: #fff;
            }

            .search-wrap .clear-input {
                top: 11px;
                right: 60px;
                width: 34px;
                height: 26px;
                line-height: 26px;
                background: url() no-repeat center center;
                background-color: #ededed;
                background-size: 18px 18px;
                position: absolute;
                padding: 0;
                border: 0;
                font-size: 14px;
                border-radius: 4px;
                text-align: center;
                z-index: 2;
            }

            .search-wrap.init-status .cancel,
            .search-wrap.init-status .clear-input,
            .search-wrap.init-status .submit {
                display: none;
            }

            .search-wrap .search-bar .keyword {
                display: block;
                width: 100%;
                padding-top: 6px;
                padding-bottom: 6px;
                border: 0;
                font-size: 14px;
                line-height: 18px;
                background: 0 0;
            }

            .search-wrap.init-status .search-bar .keyword {
                text-align: left;
            }

            .search-wrap .search-bar .keyword::-webkit-input-placeholder {
                background: url();
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 80px 16px;
                color: gray
            }

            .search-wrap.init-status .search-bar .keyword::-webkit-input-placeholder {
                background-position: center center;
            }

            .suggestion-wrap {
                position: absolute;
                top: 46px;
                bottom: 0;
                z-index: 7;
                width: 100%;
                background: #f6f6f6;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
            }

            .map-wrap {
                height: 220px;
                position: relative;
                top: 46px;
                width: 100%;
            }

            .list-wrap {
                width: 100%;
                position: absolute;
                background-color: #fff;
                z-index: 1;
                bottom: 0;
                left: 0;
                overflow: hidden;
                border-top: 1px solid #d3d3d3;
                overflow-y: scroll;
                padding-bottom: 0;
                padding-bottom: constant(safe-area-inset-bottom);
                padding-bottom: env(safe-area-inset-bottom);
                -webkit-overflow-scrolling: touch;
            }

            .poi-list ul {
                list-style: none;
                width: 100%;
                text-align: left;
                padding: 0 0 65px;
            }

            .suggestion-wrap li,
            .active-pos,
            .poi-list li {
                position: relative;
                display: block;
                padding-left: 15px;
                border: none;
                height: 58px;
                padding-top: 6px;
                margin: 0;
            }

            .poi-list li * {
                pointer-events: none;
            }

            .poi-list li p,
            .active-pos div p {
                padding-bottom: 10px;
                border-bottom: 1px solid #d3d3d3;
            }

            .poi-title {
                font-size: 14px;
                line-height: 27px;
                color: #333;
                font-weight: 400;
                display: block;
                width: 92%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .poi-address {
                font-size: 12px;
                color: gray;
                height: 20px;
                line-height: 20px;
                margin: 0;
                width: 92%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                display: block;
            }

            .poi-city,
            .poi-latlng {
                line-height: 22px;
                display: none;
            }

            .no-more-results,
            .no-results {
                color: gray;
                padding: 20px 0;
                line-height: 24px;
                text-align: center;
            }

            .no-more-results p,
            .no-results p {
                padding: 0;
                margin: 0;
            }

            .list-wrap i {
                width: 16px;
                height: 16px;
                display: none;
                background: url() no-repeat right center;
                background-size: 16px 16px;
                position: absolute;
                right: 15px;
                top: 50%;
                margin-top: -8px;
            }

            .list-wrap i.active {
                right: 30px;
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div class="search-wrap init-status">
            <div class="search-bar">
                <form name="poi-search" id="poiSearch" onsubmit="return false;">
                    <input type="search" class="keyword" id="searchword" placeholder=" ">
                    <button type="reset" class="clear-input hide"></button>
                    <button type="submit" class="submit hide">搜索</button>
                </form>
                <a class="cancel">取消</a>
            </div>
        </div>
        <div class="suggestion-wrap hide">
            <div class="poi-list">
                <ul>

                </ul>
            </div>
            <div class="no-results hide">
                <p>对不起，没有搜索到相关数据！</p>
            </div>
            <div class="no-more-results hide">
                <p>亲，没有更多了~</p>
            </div>
        </div>
        <div id="map" class="map-wrap"></div>
        <div class="list-wrap">
            <div class="active-pos">

            </div>
            <div class="poi-list">
                <ul>

                </ul>
                <div class="no-results hide">
                    <p>对不起，没有搜索到相关数据！</p>
                </div>
            </div>
        </div>
        <script>
            var loc;
            var serviceWebview;
            var back = function (cancel) {
                if (cancel) {
                    plus.webview.postMessageToUniNView({
                        type: 'chooseLocation',
                        args: {
                            errMsg: 'cancel'
                        }
                    }, '__uniapp__service');
                }
                var webview = plus.webview.currentWebview()
                if (webview.__uniapp_statusbar_style === 'dark') {
                    plus.navigator.setStatusBarStyle('dark')
                }
                webview.close('auto');
            };
            window.__chooseLocationConfirm__ = function () {
                if (!loc) {
                    plus.nativeUI.alert('您尚未选择位置!');
                    return;
                }
                plus.webview.postMessageToUniNView({
                    type: 'chooseLocation',
                    args: loc
                }, '__uniapp__service');
                back();
            }
            var searchWrapElem = document.querySelector('.search-wrap');
            var searchWordElem = document.getElementById('searchword');
            var resetElem = document.querySelector('[type="reset"]');
            var cancelElem = document.querySelector('.cancel');

            var suggestionWrapElem = document.querySelector('.suggestion-wrap');
            var mapElem = document.getElementById('map');
            var listWrapElem = document.querySelector('.list-wrap');

            var suggestionPoiListElem = suggestionWrapElem.querySelector('.poi-list ul');
            var suggestionPoiNoResultsElem = suggestionWrapElem.querySelector('.no-results');
            var suggestionPoiNoMoreResultsElem = suggestionWrapElem.querySelector(
                '.no-more-results');

            var activePosElem = document.querySelector('.active-pos');
            var nearbyPoiListElem = listWrapElem.querySelector('.poi-list ul');
            var nearbyPoiNoResultsElem = listWrapElem.querySelector('.no-results');

            listWrapElem.style.top = mapElem.offsetHeight + 47 + 'px';


            var debounce = function (func, wait, immediate) {
                var timeout, result;
                return function () {
                    var context = this,
                        args = arguments,
                        later, callNow;
                    later = function () {
                        timeout = null;
                        if (!immediate) {
                            result = func.apply(context, args);
                        }
                    };
                    callNow = immediate && !timeout;
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                    if (callNow) {
                        result = func.apply(context, args);
                    }
                    return result;
                };
            };

            var plusReady = function (callback) {
                if (window.plus) {
                    callback()
                } else {
                    document.addEventListener('plusready', callback)
                }
            }
            var ZOOM = 13
            window.__chooseLocation__ = function (params) {
                if (params && params.keyword) {
                    searchWordElem.value = params.keyword;
                }
                plusReady(function () {
                    serviceWebview = plus.webview.getWebviewById('__W2A_CONTEXT_') ||
                        plus.webview
                            .getLaunchWebview();
                    plus.key.addEventListener('backbutton', function () {
                        back(true);
                    });

                    var nativeMarker = false;

                    var nativeMap = new plus.maps.Map('map', {
                        zoom: ZOOM
                    });


                    var centerPoint = false

                    var reverseGeocode = debounce(function (point) {
                        plus.maps.Map.reverseGeocode(point, {}, function (res) {
                            activePosElem.innerHTML =
                                '<div data-name="' + (res.address || '') +
                                '" data-address="' + (res.address || '') +
                                '" data-lat="' + res.coord.getLat() +
                                '" data-lng="' + res.coord.getLng() +
                                '"><h2 class="poi-title">地图位置</h2><p><span class="poi-address">' +
                                (res.address ||
                                    '') +
                                '</span><span class="poi-latlng">' +
                                res.coord
                                    .getLat() +
                                ',' + res.coord.getLng() +
                                '</span><i></i></p></div>';
                        }, function (err) {
                            console.log(err);
                        });
                        searchNearbyPoi.poiSearchNearBy(searchWordElem.value || '', point, 1000);
                    }, 10)


                    nativeMap.getUserLocation(function (state, point) { //获取当前用户坐标
                        if (state === 0) {
                            nativeMarker = new plus.maps.Marker(point);
                            nativeMarker.setIcon('__uniappmarker@3x.png');
                            nativeMap.addOverlay(nativeMarker);
                            //centerPoint = point;
                            nativeMap.showUserLocation(true);
                            if (plus.os.name !== 'Android') {
                                nativeMap.setCenter(point);
                            }
                            // reverseGeocode(centerPoint);
                        } else {
                            console.log('获取用户坐标失败');
                        }

                    });



                    nativeMap.onstatuschanged = function (evt) { //切换坐标中心
                        // if (!centerPoint) {
                        //     return;
                        // }
                        if (centerPoint && evt.center) {
                            if (centerPoint.latitude === evt.center.latitude &&
                                centerPoint.longitude === evt.center.longitude) {
                                return;
                            }
                        }
                        centerPoint = evt.center
                        if (nativeMarker) {
                            nativeMarker.setPoint(centerPoint);
                        }
                        reverseGeocode(centerPoint);
                    };

                    var searchPoi = new plus.maps.Search(nativeMap);
                    var searchNearbyPoi = new plus.maps.Search(nativeMap);

                    var showMap = function (centerPoint) {
                        nativeMap.show();
                        if (centerPoint) {
                            if (nativeMarker) {
                                nativeMarker.setPoint(centerPoint);
                            }
                            nativeMap.setCenter(centerPoint);
                            //               setTimeout(function() {
                            //                 nativeMap.setZoom(ZOOM);
                            //               }, 150);
                            // reverseGeocode(centerPoint);
                        }
                        searchWordElem.value = '';
                        cancelElem.className = 'cancel hide';
                        searchWrapElem.className = 'search-wrap init-status';
                        suggestionWrapElem.className = 'suggestion-wrap hide';
                        resetSuggestionPoiList();
                    }

                    var resetSuggestionPoiList = function () {
                        suggestionPoiListElem.innerHTML = '';
                        suggestionPoiNoResultsElem.className = 'no-results hide';
                        suggestionPoiNoMoreResultsElem.className =
                            'no-more-results hide';
                    }

                    var showSuggestionPoiList = function () {
                        nativeMap.hide();
                        resetSuggestionPoiList();
                    }

                    var showSuggestionPoiNoResults = function () {
                        suggestionPoiListElem.innerHTML = '';
                        suggestionPoiNoResultsElem.className = 'no-results';
                        suggestionPoiNoMoreResultsElem.className =
                            'no-more-results hide';
                    }

                    var renderPoiResults = function (poiList) {
                        var html = [];
                        for (var i = 0; i < poiList.length; i++) {
                            var poi = poiList[i];
                            if (poi.point) {
                                html.push('<li data-name="' + (poi.name || '') +
                                    '" data-address="' + (poi.address || '') +
                                    '" data-lat="' + poi.point.getLat() +
                                    '" data-lng="' + poi.point.getLng() +
                                    '"><p><span class="poi-title">' + poi.name +
                                    '</span><span class="poi-address">' + (poi.address ||
                                        '') +
                                    '</span><span class="poi-latlng">' + poi.point
                                        .getLat() +
                                    ',' + poi.point.getLng() +
                                    '</span><span class="poi-city">' + poi.city +
                                    '</span></p><i></i></li>');
                            }
                        }
                        return html.join('');
                    }
                    var showNearbyPoiNoResults = function () {
                        nearbyPoiListElem.innerHTML = '';
                        nearbyPoiNoResultsElem.className = 'no-results';
                    }
                    var showNearbyPoiResults = function (poiList) {
                        var html = renderPoiResults(poiList);
                        if (html) {
                            nearbyPoiListElem.innerHTML = html;
                            nearbyPoiNoResultsElem.className = 'no-results hide';
                        } else {
                            showNearbyPoiNoResults();
                        }
                    }
                    var showSuggestionPoiResults = function (poiList) {
                        var html = renderPoiResults(poiList);
                        if (html) {
                            suggestionPoiListElem.innerHTML = html;
                            suggestionPoiNoResultsElem.className =
                                'no-results hide';
                            suggestionPoiNoMoreResultsElem.className =
                                'no-more-results';
                        } else {
                            showSuggestionPoiNoResults();
                        }
                    }

                    searchPoi.onPoiSearchComplete = function (state, res) {
                        if (state === 0) {
                            if (res.poiList.length) {
                                showSuggestionPoiResults(res.poiList);
                            } else {
                                showSuggestionPoiNoResults();
                            }
                        } else {
                            showSuggestionPoiNoResults();
                        }
                    };

                    searchNearbyPoi.onPoiSearchComplete = function (state, res) {
                        if (state === 0) {
                            if (res.poiList.length) {
                                showNearbyPoiResults(res.poiList);
                            } else {
                                showNearbyPoiNoResults();
                            }
                        } else {
                            showNearbyPoiNoResults();
                        }
                    };

                    var getSuggestion = debounce(function (q) {
                        if (q.trim()) {
                            searchPoi.poiSearchNearBy(q, centerPoint, 50000)
                        } else { }
                    }, 10);

                    suggestionPoiListElem.addEventListener('click', function (evt) {
                        var target = evt.target;
                        for (; target && target !== suggestionPoiListElem; target =
                            target.parentNode) {
                            if (target && target.tagName === 'LI') {
                                var laglng = target.querySelector('.poi-latlng')
                                    .innerText
                                    .split(',');
                                centerPoint = new plus.maps.Point(Number(laglng[1]), Number(laglng[
                                    0]));
                                showMap(centerPoint);
                                reverseGeocode(centerPoint);
                                break;
                            }
                        }
                    });

                    searchWordElem.addEventListener('click', function () {
                        searchWrapElem.className = 'search-wrap';
                        suggestionWrapElem.className = 'suggestion-wrap';
                        cancelElem.className = 'cancel';
                        showSuggestionPoiList();
                    });

                    var oldHasValue = false;

                    var setInputState = function (hasValue) {
                        if (hasValue !== oldHasValue) {
                            if (hasValue) {
                                resetElem.className = 'clear-input'
                            } else {
                                resetElem.className = 'clear-input hide'
                            }
                            oldHasValue = hasValue;
                        }
                    }

                    searchWordElem.addEventListener('input', function () {
                        var value = this.value.replace(/^\s+|\s+$/g, '');
                        setInputState(!!value);
                        getSuggestion(value);
                    });

                    resetElem.addEventListener('click', function (e) {
                        setInputState(false);
                        setTimeout(function () {
                            searchWordElem.focus();
                        }, 0);
                    });
                    cancelElem.addEventListener('click', function () {
                        showMap();
                    });

                    listWrapElem.addEventListener('click', function (e) {
                        var target = e.target;
                        for (; target && target !== listWrapElem; target =
                            target.parentNode) {
                            if (target.className === 'active-pos' || target.tagName ===
                                'LI') {
                                var lastActiveElem = listWrapElem.querySelector(
                                    'i.active');
                                if (lastActiveElem) {
                                    lastActiveElem.className = '';
                                }
                                if (target.className === 'active-pos') {
                                    target = target.children[0]
                                }
                                target.querySelector('i').className = 'active';
                                loc = {
                                    poiname: target.getAttribute('data-name'),
                                    poiaddress: target.getAttribute(
                                        'data-address'),
                                    latlng: {
                                        lat: target.getAttribute(
                                            'data-lat'),
                                        lng: target.getAttribute(
                                            'data-lng'),
                                    }
                                }
                                if (nativeMarker) {
                                    nativeMarker.setPoint(new plus.maps.Point(
                                        loc.latlng.lng, loc.latlng.lat));
                                }
                                break;
                            }
                        }
                    })


                });
            };
        </script>
    </body>

</html>